<template>
  <div class="publish">
    <el-card>
      <div slot="header" class="clearfix">
        <!-- 计算属性 -->
        <span>{{title}}</span>
      </div>
      <!-- 发布文章的表单 -->
      <el-form label-width="120px" :model="articleForm" ref="myform">
        <!-- 文章的标题 -->
        <el-form-item prop="title" label="标题：">
          <el-input v-model="articleForm.title" placeholder='文章名称' style="width:400px"></el-input>
        </el-form-item>
        <!-- 文章的内容 -->
        <el-form-item prop="content" label="内容：">
          <quill-editor v-model="articleForm.content" class='rich-text' :options="editorOption"></quill-editor>
        </el-form-item>
        <!-- 文章封面 -->
        <el-form-item prop="cover" label="封面：">
          <!-- 单选按钮 -->
          <!-- 只要一点击其他按钮 就会将图片数组清空 -->
          <el-radio-group @change='articleForm.cover.images=[]' v-model="articleForm.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <!-- 当选择1个图片时 -->
          <div v-if='articleForm.cover.type===1'>
            <!-- <my-cover :value='articleForm.cover.images[0]' @input='getCover'></my-cover> -->
            <!-- <my-cover :value='articleForm.cover.images[0]' @input='getCover($event, 0)'></my-cover> -->
            <!-- <my-cover :value='articleForm.cover.images[0]' @input='this.$set(this.articleForm.cover.images, 0, $event)
'></my-cover> -->
            <!-- 上面的写法可缩写成： -->
            <my-cover v-model='articleForm.cover.images[0]'></my-cover>
          </div>
          <!-- 当选择3个图片时 -->
          <div v-if='articleForm.cover.type===3'>
            <my-cover v-model='articleForm.cover.images[0]'></my-cover>
            <my-cover v-model='articleForm.cover.images[1]'></my-cover>
            <my-cover v-model='articleForm.cover.images[2]'></my-cover>
          </div>
        </el-form-item>

        <!-- 所属频道 -->
        <el-form-item prop="channel_id" label="频道：">
          <my-channel v-model='articleForm.channel_id'></my-channel>
        </el-form-item>
        <!-- 添加按钮 -->
        <el-form-item label="">
          <el-button @click='handleSubmit(false)' type="primary">发表</el-button>
          <el-button @click='handleSubmit(true)'>存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>
<script>
// 导入富文本相关的样式和组件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 导入频道组件
import MyChannel from '@/components/MyChannel.vue'
// 导入图片组件
import MyCover from '@/components/MyCover.vue'
import { publishArticle, getArticleInfo, editArticle } from '@/api/article.js'
export default {
  name: 'PubilishArticle',
  // 配置子组件
  components: {
    quillEditor,
    MyChannel,
    MyCover
  },
  data () {
    return {
      // 弹出层
      dialogVisible: false,
      // 表单数据
      articleForm: {
        // 对应文章的id
        id: null,
        // 题目
        title: '',
        // 内容
        content: '',
        // 频道id
        channel_id: null,
        cover: {
          // 封面类型
          type: 1,
          // 封面的图片
          images: []
        }
      },
      // 富文本配置对象
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  // 计算属性 动态生成 题目
  computed: {
    title () {
      return this.articleForm.id ? '编辑文章' : '发布文章'
    }
  },
  // 侦听器 重置表单   恢复为表单原来的初始值
  watch: {
    $route (to) {
      if (!to.query.id) {
        // 发布文章
        this.articleForm.id = null
        // 重置表单
        // 此处用resetfields    el-form-item需要添加prop属性
        this.$refs.myform.resetFields()
      }
    }
  },
  methods: {
    // 根据id获取文章详情数据
    async getArticleInfo (id) {
      try {
        const ret = await getArticleInfo(id)
        this.articleForm = ret.data
      } catch (error) {
        this.$message.error('获取文章数据失败')
      }
    },
    // 发布或者存入草稿 判断type值时true还是false 为true就是存入草稿
    async handleSubmit (type) {
      if (this.articleForm.id) {
        try {
          // 如果有id值 说明是点击的编辑进入的页面
          await editArticle(this.articleForm, {
            draft: type
          })
          // 跳转到文章列表页面
          this.$router.push('/home/article')
        } catch (error) {
          this.$message.error('编辑文章失败')
        }
      } else {
        try {
          await publishArticle(this.articleForm, {
            draft: type
          })
          // 跳转到文章列表页面
          this.$router.push('/home/article')
        } catch (error) {
          this.$message.error('发布文章失败')
        }
      }
    }
    // 获取子组件传递过来的封面地址
    // getCover (coverURL, index) {
    //   // Vue规定： 数组的操作不能直接操作索引（这种修改数据的方式不是相应的 所以页面显示不了）
    //   // this.articleForm.cover.images[0] = coverURL
    //   // 数组相关的API在Vue的底层是经过定制的
    //   // this.articleForm.cover.images.push(coverURL)
    //   // 第一种实现方式
    //   // const arr = [...this.articleForm.cover.images]
    //   // arr[index] = coverURL
    //   // this.articleForm.cover.images = arr

    //   // 第二种实现方式
    //   /*
    //   参数1： 代表要更改的数组对象
    //   参数2：代表的是要更改的数组的索引
    //   参数3： 代表改成什么（替换成什么）
    //   */
    //   this.$set(this.articleForm.cover.images, index, coverURL)
    // }
  },
  created () {
    // 当点击编辑 跳转到此页面 传参方式是/?id= 所以去query获取值
    const id = this.$route.query.id
    if (id) {
      this.getArticleInfo(id)
    }
  }

}
</script>
<style lang="less" scoped>
.publish {
  /deep/ .rich-text {
    // height: 300px;
    min-height: 300px;
    .ql-container {
      //   height: 300px;
      min-height: 300px;
    }
  }
}
</style>
